<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap-5.1.3-dist/css/bootstrap.css">
    <script type="text/javascript" src="/static/bootstrap-5.1.3-dist/js/bootstrap.js"></script>
    <title>${post.title}</title>
</head>
<style>
    .back {
        position: absolute;
        font-size: 26px;
        top: 30px;
        left: 40px;
        text-decoration: none;
        color: #000;
        font-weight: bold;
    }

    .back:hover {
        color: #000;
    }

    h2 {
        text-align: center;
        margin-top: 15px;
    }

    .card {
        width: 1400px;
        height: 700px;
        background-color: #fffdfd;
        border-radius: 30px;
        border: none;
        box-shadow: 5px 5px 10px #adabab;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .mod {
        padding: 30px 300px;
    }

    .mb-3 {
        padding-bottom: 30px;
    }

    .btn button:nth-child(1) {
        margin-right: 50px;
    }
    .content{
        display: flex;
        justify-content: center;
        margin-top: 30px;

    }
    .content-item{
        width: 640px;
        height: 640px;
        /*background-color: pink;*/
        margin: 0 20px;
        border-radius: 15px;
        border: 1px solid #2c3034;
        box-shadow: 3px 3px 5px #adabab;
        padding: 20px 20px;
    }

    /*.remark-content {*/
    /*    width: 650px;*/
    /*    height: 150px;*/
    /*    background-color: #fffdfd;*/
    /*    border-radius: 30px;*/
    /*    border: none;*/
    /*    box-shadow: 5px 5px 10px #adabab;*/
    /*}*/

    .remark-content .remark-item {
        padding-top: 10px;
        padding-left: 10px;
    }

    .remark-content .remark-item .nierong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 580px;
        background-color: #e3ddde;
        display: block;

    }
    .remark-content .remark-item .huifu{
        margin-left: 10px;
    }

    .remark-content .page {
        height: 50px;
        /*width: 1270px;*/
        /*margin-left: 1400px;*/
        position: fixed;
        bottom: 300px;
        right: 230px;
    }
    .reply{

        position: fixed;
        bottom: 100px;
    }
    .reply textarea{
        width: 600px;
    }
    .reply .btn{
        margin-top: -30px;
    }
</style>
<body>
<a href="${pageContext.request.contextPath}/post_list" class="back">
    <span><</span>返回</a>
<h2>主题：${post.title}</h2>
<div class="card">
    <div class="content">
        <div class="mod content-item">
            <div class="uid">
                <div class="mb-3 row">
                    <label for="staticUsername" class="col-sm-2 col-form-label">发帖人</label>
                    <div class="col-sm-2">
                        <input type="text" readonly class="form-control-plaintext" id="staticUsername"
                               value="${userpost.username}">
                    </div>
                    <div class="col-sm-3">
                        <c:if test="${flag == 0}">
                        <span><a href="add_del_concern?concernid=${userpost.id}&flag=0&pid=${post.id}" type="button"
                                 class="btn btn-outline-success">关注</a></span>
                        </c:if>
                        <c:if test="${flag == 1}">
                        <span><a href="add_del_concern?concernid=${userpost.id}&flag=0&pid=${post.id}" type="button"
                                 class="btn btn-outline-warning">取消关注</a></span>
                        </c:if>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="staticFans" class="col-sm-2 col-form-label">粉丝数</label>
                    <div class="col-sm-10">
                        <input type="text" readonly class="form-control-plaintext" id="staticFans" value="${fans}">
                    </div>
                </div>
            </div>


            <div class="neironglie">
                <div class="petphoto">
                    <div class="mb-3 row">
                        <label class="col-sm-2 col-form-label">宠物图片</label>
                        <div class="col-sm-10">
                            <img src="${pageContext.request.contextPath}/display?photo=${pet.photo}" style="width: 200px;height: 200px">
                        </div>
                    </div>
                </div>

                <div class="content-t">
                    <div class="mb-3 row">
                        <label for="staticContent" class="col-sm-2 col-form-label">内容</label>
                        <div class="col-sm-10">
                            <input type="text" readonly class="form-control-plaintext" id="staticContent"
                                   value="${post.content}">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="content-item">
            <!-- 评论展示-->
            <div class="remark">
                <div class="mb-3 row">
                    <label class="col-sm-2 col-form-label">评论区</label>
                    <div class="remark-content">
                        <div class="col-sm-11">

                            <c:forEach items="${remarks}" var="remark" varStatus="s">
                                <c:forEach items="${userList}" var="ruser" varStatus="s1">
                                    <c:if test="${ruser.id == remark.userid}">
                                        <div class="remark-item">
                                            <span>${ruser.username}</span>：
                                            <span class="nierong">${remark.content}</span>
                                            <span class="time">${remark.date}</span>
                                            <a href="add_reply?rid=${remark.id}" class="btn-outline-primary huifu">回复</a>
                                        </div>

                                    </c:if>
                                </c:forEach>
                            </c:forEach>
                        </div>
                        <div class="page">

                            <c:if test="${pageInfo.isLast}">
                        <span><a href="commentList?page=${pageInfo.pageIndex-1}"
                                 class="btn-outline-secondary">上一页</a></span>
                            </c:if>
                            <c:if test="${pageInfo.isNext}">
                        <span><a href="commentList?page=${pageInfo.pageIndex+1}"
                                 class="btn-outline-secondary">下一页</a></span>
                            </c:if>
                            <br>
                            <span>第 ${pageInfo.pageIndex} 页/共 ${pageInfo.sumCount} 页</span>
                        </div>
                    </div>
                </div>


            </div>
            <!-- 评论书写框  -->
            <div class="reply">
                <form action="addComment" method="post">
                    <input type="hidden" name="pid" value="${post.id}">
                    <div class="mb-3">
                        <label for="exampleFormControlTextarea1" class="form-label">评论</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="content" placeholder="评论"></textarea>
                    </div>

<%--                    <br style="clear:both"/>--%>
<%--                    <textarea style="height:80px;width: 200px" name="content" placeholder="评论"></textarea>--%>
                    <%--        <br style="clear:both"/>--%>
                    <input type="submit" name="submit" class="btn btn-primary" value="评论" />
                </form>
            </div>

        </div>
    </div>



</div>

</body>
</html>
